<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字</title>
    <link rel="stylesheet" href="animate.css">
    <style>
    html,body{
        height: 100%
    }
       .dh{
            animation: rubberBand 1s ease 0s;
           
        }
        .dh2{
            animation: swing 1s ease 0s;
             color: red
        }
        h1{
            font-size:200px;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
            border-radius:50% ;
            
        }
        main{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            text-align: center;
           
        }
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;

        }
    </style>
</head>
<body> 
    <main>
         <h1 id="h"></h1>
        
    </main>
       <div id="z"></div>
   
    <script>
        var zshu=0
        var cshu=0
        var zmArr=[]
        var span=document.getElementById('z')
        var h1=document.getElementById('h')
        var kp=0 
        var timer=null
         for(var i=65;i<91;i++){
            //string.fromCharCode根据编码获取内容 
            zmArr.push(String.fromCharCode(i))
        }
        function ks(){
            h1.innerText=zmArr[kp]
             kp=Math.floor(Math.random()*26) 
        }  
        ks()
        document.body.onkeydown=function(event){   
            if(event.key.toUpperCase()==h1.innerText ){
                   ks()        
                   h1.className='dh' 
                    setInterval( function(){
                         h1.className=''
                    },2000)
                    zshu=1
            
            }
            else{
                   h1.className='dh2'
                   setInterval( function(){
                      h1.className='' 
                    },2000)
                    cshu+=1
                
            }
            aa();
        }
        function aa(){
              span.innerText='正确的' +' '+ zshu +'个'+' ' + '错误的' +' '+cshu+' '+'个'+' '+
              '正确率'+' '+ Math.ceil((zshu/(zshu+cshu))*100)+' ' +'%'

        }
      
    </script>
</body>
</html>